<template>
    <div id="body">
        <img src="../assets/images/home/banner.png" class="banxin tanxin" alt="">
        <Title title="精品推荐" :AllInfo="jingpingInfo" :src="jingpingSrc"/>
        <Title title="热门兑换" :AllInfo="remenInfo" :src="remenSrc"/>
        <div class="jifen">
           <Title title="积分攻略" :src="jifenSrc"/> 
           <ul class="tanxin banxin">
                <li>
                    <h3>签到得积分</h3>
                    <button>去签到</button>
                </li>
                <li>
                    <h3>购课得积分</h3>
                    <button>去购课</button>
                </li>
                <li>
                    <h3>推荐得积分</h3>
                    <button>去推荐</button>
                </li>
                <li>
                    <h3>拼团得积分</h3>
                    <button>去拼团</button>
                </li>
           </ul>
        </div>
    </div>
</template>

<script>
import Title from "../components/home/Title.vue";
import { getJingPingData , getReMenData } from "../request/Api.js";
export default {
    data () {
        return {
            jingpingSrc : require('../assets/images/home/Recommend.png'),
            remenSrc : require('../assets/images/home/hot.png'),
            jifenSrc : require('../assets/images/home/integral.png'),
            jingpingInfo: [],
            remenInfo : [],
           
        }
    },
    components :{
        Title
    },
    created(){
        getJingPingData().then((res)=>{
            this.jingpingInfo = res.data.data.data.records
        }),
        getReMenData().then(res =>{
            this.remenInfo = res.data.data.data.records
        })
        
    },
    
}
</script>
 
<style lang = "less" scoped>
    @import '../assets/base.less';
    .jifen {
        ul {
            li{
                /* 注意背景的设置格式要一样 也就是单位要一样 */
                background-size: 100% 100%;
                width: 284px;
                height: 168px;
                margin-bottom: 40px;
                transition: background-size .2s linear;
                cursor: pointer;
                h3{
                    color: white;
                    font-size: 30px;
                    margin-top: 43px;
                    margin-left: 21px;
                }
                button {
                    width: 96px;
                    height: 27px;
                    margin-top: 18px;
                    margin-left: 21px;
                    border: 1px solid white;
                    background: none;
                    color: white;
                } 
                &:nth-of-type(1){
                    background-image: url(../assets/images/home/integral-01.png);
                    
                }
                &:nth-of-type(2){
                    background-image: url(../assets/images/home/integral-02.png);
                }
                &:nth-of-type(3){
                    background-image: url(../assets/images/home/integral-03.png);
                }
                &:nth-of-type(4){
                    background-image: url(../assets/images/home/integral-04.png);
                }
                &:hover {
                    background-size: 105% 105%;
                }
            }
            
        }
    }
</style>